<template>
  <div class="new">
    <div class="center">
      <div class="top">
        <div class="title">
          <span></span>
          <span>新品首发</span>
          <span></span>
        </div>
        <div>
          我不管这个世上的人怎么说我，我只想依照我的信念做事，绝不后悔，不管现在将来都一样。
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <ul class="clearfix">
            <li>
              <router-link :to="`/about/${p1.pid}`">
                <div class="pic"><img :src="p1.pic" alt="" /></div>
                <div class="title">{{ p1.pname }}</div>
                <div class="clearfix" style="margin-top: 15px">
                  <p class="price">￥{{ p1.price }}</p>
                  <p class="cart"><img src="/img/index/cart.webp" alt="" /></p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link :to="`/about/${p2.pid}`">
                <div class="pic"><img :src="p2.pic" alt="" /></div>

                <div class="title">{{ p2.pname }}</div>
                <div class="clearfix" style="margin-top: 15px">
                  <p class="price">￥{{ p2.price }}</p>
                  <p class="cart"><img src="/img/index/cart.webp" alt="" /></p>
                </div>
              </router-link>
            </li>
          </ul>
          <div class="big"><img src="/img/index/big2.webp" alt="" /></div>
        </div>
        <div class="right">
          <div class="big"><img src="/img/index/big1.webp" alt="" /></div>
          <ul class="clearfix">
            <li>
              <router-link :to="`/about/${p3.pid}`">
                <div class="pic"><img :src="p3.pic" alt="" /></div>

                <div class="title">{{ p3.pname }}</div>
                <div class="clearfix" style="margin-top: 15px">
                  <p class="price">￥{{ p3.price }}</p>
                  <p class="cart">
                    <img src="/img/index/cart.webp" alt="" />
                  </p></div
              ></router-link>
            </li>
            <li>
              <router-link :to="`/about/${p4.pid}`">
                <div class="pic"><img :src="p4.pic" alt="" /></div>

                <div class="title">{{ p4.pname }}</div>
                <div class="clearfix" style="margin-top: 15px">
                  <p class="price">￥{{ p4.price }}</p>
                  <p class="cart"><img src="/img/index/cart.webp" alt="" /></p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      p1: { price: 0 },
      p2: { price: 0 },
      p3: { price: 0 },
      p4: { price: 0 },
    };
  },
  mounted() {
    this.axios.get("/index/home").then((result) => {
      // console.log(result.data);
      //   console.log(this.banners);
      [this.p1, this.p2, this.p3, this.p4] = result.data;
      // console.log(this.p1, this.p2, this.p3, this.p4);
    });
  },
};
</script>


<style scoped>
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.new .center {
  width: 1200px;
  margin: 0 auto;
}
.new .top {
  height: 141px;
  text-align: center;
}
.new .top .title {
  position: relative;
  height: 46px;
}
.new .top .title span {
  display: inline-block;
}
.new .top .title span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.new .top .title span:nth-child(3) {
  position: absolute;
  top: 50%;
  right: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.new .top .title span:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 24px;
  color: #444;
}
.new .top div:nth-child(2) {
  font-size: 14px;
  color: #999;
}
/* 商品模块 */
.new .bottom {
  width: 1200px;
  height: 1055px;
}
.new .bottom .left,
.new .bottom .right {
  float: left;
  width: 600px;
  height: 1053px;
  box-sizing: border-box;
  padding: 0 25px 0 5px;
  /* background-color: #333; */
  background-clip: content-box;
}
.new .bottom .left ul li,
.new .bottom .right ul li {
  float: left;
  width: 272px;
  height: 414px;
  margin: 5px 8px 5px 0;
  padding-right: 5px;

  /* background-color: #eee; */
}
.new .bottom .left .big {
  width: 570px;
  height: 629px;
  box-sizing: border-box;
  padding-top: 62px;
  /* background-color: #eee; */
}
.new .bottom .right .big {
  padding-bottom: 62px;
}
.new .bottom .big img {
  width: 570px;
}
.new .bottom .left ul li img,
.new .bottom .right ul li img {
  width: 272px;
  height: 340px;
}
.new .bottom .left ul li .title,
.new .bottom .right ul li .title {
  font-size: 15px;
  color: #000;
  margin-top: 20px;
}
.new .bottom .left ul li .price,
.new .bottom .right ul li .price {
  font-size: 14px;
  color: #aaa;
}
.new .bottom .cart img {
  float: right;
  width: 20px !important;
  height: 20px !important;
}
.new .bottom .price {
  float: left;
}
.new .bottom ul li .pic {
  width: 272px;
  height: 340px;
  overflow: hidden;
}
.new .bottom ul li img:nth-child(1) {
  transition: all linear 0.5s;
}
.new .bottom ul li img:nth-child(1):hover {
  transform: scale(1.1);
}
</style>